<template>
  <div class="search-panel">
    <search-form>
      <search-form-item label="模型类型">
        <c-select
          style="width: 100%"
          v-model="form.modelType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in modelList"
            :key="item.codeValue"
            :label="item.codeName"
            :value="item.codeValue"
          >
          </el-option>
        </c-select>
      </search-form-item>
      <search-form-item label="统计周期">
        <c-select
          style="width: 100%"
          v-model="form.range"
          placeholder="请选择统计周期"
          @change="handleChange"
        >
          <c-option label="按年" value="1"></c-option>
          <c-option label="按月" value="2"></c-option>
          <c-option label="按日" value="3"></c-option>
        </c-select>
      </search-form-item>
      <search-form-item v-if="form.range === '1'" label="选择年份">
        <c-date-picker
          :clearable="false"
          v-model="form.yearValue"
          type="year"
          placeholder="选择年"
          format="yyyy"
          value-format="yyyy"
        >
        </c-date-picker>
      </search-form-item>
      <search-form-item v-if="form.range === '2'" label="选择月份">
        <c-date-picker
          :clearable="false"
          v-model="form.month"
          type="month"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择月份"
          @change="monthChange"
        >
        </c-date-picker>
      </search-form-item>
      <search-form-item v-if="form.range === '3'" label="选择日期范围">
        <c-select
          style="width: 100%"
          v-model="form.dateRange"
          placeholder="请选择日期范围"
        >
          <c-option label="前30天" value="30"></c-option>
          <c-option label="前15天" value="15"></c-option>
          <c-option label="前7天" value="7"></c-option>
        </c-select>
      </search-form-item>
      <template #right>
        <c-button type="primary" icon="c-icon-search" @click="setTableData()"
          >查询</c-button
        >
        <c-button @click="handleReset">重置</c-button>
      </template>
    </search-form>
  </div>
</template>

<script>
import { SearchForm, SearchFormItem } from '@/component/SearchForm'
import { mapGetters } from 'vuex'
import { getDictByType } from '@/api/config_platform'
export default {
  data() {
    return {
      modelList: [],
      form: {}
    }
  },
  created() {
    this.getFindMethod()
  },
  components: {
    SearchForm,
    SearchFormItem
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    // 初始化form
    getDefaultModel() {
      const { districtNo: areaCode } = this.user
      const yearValue = new Date().getFullYear() + ''
      const modelType = this.modelList[0].codeValue
      return {
        modelType,
        areaCode,
        dateRange: '',
        monthValue: '',
        month: '',
        range: '1',
        yearValue
      }
    },
    monthChange(value) {
      const [year, month] = value.split('-')
      this.form.yearValue = year
      this.form.monthValue = month
    },
    handleChange(value) {
      let obj = {
        yearValue: '',
        monthValue: '',
        dateRange: '',
        month: ''
      }
      switch (+value) {
        case 1:
          obj.yearValue = new Date().getFullYear() + ''
          break
        case 2:
          obj.yearValue = new Date().getFullYear() + ''
          obj.monthValue = new Date().getMonth() + 1
          obj.month =
            new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
          break
        case 3:
          obj.dateRange = '30'
          break
        default:
          break
      }
      this.form = Object.assign({}, this.form, obj)
    },
    // 获取字典表
    async getFindMethod() {
      const { data } = await getDictByType('MODEL_TYPE')
      this.modelList = data
      this.handleReset()
    },
    // 搜索
    setTableData() {
      console.log(this.form)
      this.$emit('search', this.form)
    },
    // 重置
    handleReset() {
      this.form = this.getDefaultModel()
      this.setTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>